<template>
	<div>
		<!-- 筛选 -->
		<div>
			<!-- tab -->
			<el-row class="row">
				<el-col :span="2"><span>订单状态：</span></el-col>
				<el-col :span="22">
					<el-button :type="(route.query.state || '全部') === v ? 'primary' : 'default'" v-for="(v, i) in stateList"
						:key="i" @click="handleChangeState(v)">{{ v }}</el-button>
				</el-col>
			</el-row>
			<!-- 搜索 -->
			<el-row class="row">
				<el-col :span="2"> <span>请搜索：</span></el-col>
				<el-col :span="22">
					<el-input v-model="wd" @change="handleChangeWd">
						<template #append>
							<el-button type="primary">搜索</el-button>
						</template>
					</el-input>
				</el-col>
			</el-row>
			<!-- 区间 -->
			<el-row class="row">
				<el-col :span="2"> <span>时间查询：</span></el-col>
				<el-col :span="22">
					<el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="To"
						start-placeholder="Start date" end-placeholder="End date" size="large" />
					<el-button @click="handleQueryDate">查询</el-button>
				</el-col>
			</el-row>
			<!-- 排序 -->
			<el-row class="row">
				<el-col :span="2"> <span>排序：</span></el-col>
				<el-col :span="22">
					<el-button @click="() => {
						router.push({
							path: '/list/manage',
							query: {
								...route.query,
								desc: 'WEJKAFLNKALKFLKNAWM;DLKAWNDA;LK'
							},
						})
					}">升序</el-button>
					<el-button @click="() => {
						router.push({
							path: '/list/manage',
							query: {
								...route.query,
								desc: '2'
							},
						})
					}">降序</el-button>
				</el-col>
			</el-row>
		</div>
		<!-- 表格 -->
		<div>
			<el-table :data="list" @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="code" label="订单编号" width="100px"></el-table-column>
				<el-table-column prop="createDateTime" label="创建时间" width="200"></el-table-column>
				<el-table-column prop="uid" label="用户账户" width="200"></el-table-column>
				<el-table-column prop="price" label="订单金额"></el-table-column>
				<el-table-column prop="pay" label="支付方式" width="100px"></el-table-column>
				<el-table-column prop="source" label="订单来源" width="100px"></el-table-column>
				<el-table-column prop="state" label="订单状态" width="100px"></el-table-column>
				<el-table-column>
					<template #default="scope">
						<el-button type="danger" @click="handleDeleteByUid(scope.row.uid)">删除</el-button>
						<el-button type="primary" @click="handleModify(scope.row)">编辑</el-button>
					</template>
					<template #header>
						<span v-if="uids.length === 0">操作</span>
						<el-button v-else type="danger" @click="handleDeleteMutlByUid">删除选中</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :total="total"
				:page-size="route.query.pageSize ? + route.query.pageSize : 10"
				:default-current-page="route.query.pageCode ? +route.query.pageCode : 1"
				@current-change="handleChangePageCode" />
		</div>
		<!-- 编辑弹框 -->
		<el-dialog v-model="visible" title="编辑">
			<div class="content">
				<el-form :model="form" label-width="120px">
					<el-form-item label="订单编号">
						<el-input v-model="form.code" disabled/>
					</el-form-item>
						<el-form-item label="创建时间">
						<el-input v-model="form.createDateTime" disabled/>
					</el-form-item>
						<el-form-item label="用户账户">
						<el-input v-model="form.uid" disabled/>
					</el-form-item>

					<el-form-item label="订单金额">
						<el-input v-model="form.price" />
					</el-form-item>
					<el-form-item label="下单来源">
						<el-select v-model="form.source" placeholder="please select your zone">
							<el-option :label="v" :value="v" v-for="(v, i) in sourceList" :key="i" />
						</el-select>
					</el-form-item>
					<el-form-item label="支付方式">
						<el-select v-model="form.pay" placeholder="please select your zone">
							<el-option :label="v" :value="v" v-for="(v, i) in payList" :key="i" />
						</el-select>
					</el-form-item>
					<el-form-item label="支付状态">
						<el-radio-group v-model="form.state">
							<el-radio :label="v" v-for="(v, i) in stateList" :key="i" />
						</el-radio-group>
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="visible = false">取消</el-button>
					<el-button type="primary" @click="handleEdit">修改</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>


<!-- 启动 setup 语法糖 -->
<script lang="ts" setup>
import { onMounted, ref, watch, reactive } from 'vue'
import { useRoute, useRouter, LocationQueryValue } from 'vue-router'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'
interface ListItem {
	"code": 1,
	"createDateTime": string,
	"uid": string,
	"price": number
	"pay": string,
	"source": string,
	"state": string
}
// 路由
const route = useRoute()
const router = useRouter()

// 列表
const list = ref<ListItem[]>([])
// 总长度
const total = ref<number>(0)
// 搜多内容
const wd = ref(route.query.wd || '')
// 日期区间
const value2 = ref<string | Date[]>('')
// 选中uid
const uids = ref<string[]>([])

if (route.query.date && typeof route.query.date === 'string') {
	value2.value = route.query.date.split(',').map(v => {
		return new Date(+v)
	})
}
const stateList = [
	"全部",
	"未付款",
	"已付款",
	"待发货",
	"已发货",
	"代签收",
	"已签收",
	"已关闭",
]
// 请求数据
const fetchList = async () => {
	const resp = await axios.get('/api/lists', {
		params: {
			// 获取路由参数
			pageCode: route.query.pageCode || 1,
			pageSize: route.query.pageSize || 10,
			state: route.query.state || '全部',
			wd: route.query.wd,
			date: route.query.date,
			// desc: 'WEJKAFLNKALKFLKNAWM;DLKAWNDA;LK'
			desc: route.query.desc
		}
	})
	// 保存当前列表
	list.value = resp.data.data
	// 保存列表的总长度
	total.value = resp.data.total
}

// 页码改变函数
const handleChangePageCode = (newPageCode: number) => {
	router.push({
		path: '/list/manage',
		query: {
			...route.query,
			pageCode: newPageCode
		},
	})
}

// 订单状态改变函数
const handleChangeState = (newState: string) => {
	router.push({
		path: '/list/manage',
		query: {
			...route.query,
			state: newState
		},
	})
}

// 搜索改变函数
const handleChangeWd = (value: string) => {
	router.push({
		path: '/list/manage',
		query: {
			...route.query,
			wd: value
		},
	})
}

// 日期改变函数
const handleQueryDate = () => {

	if (typeof value2.value !== 'string') {
		const date = value2.value.map(v => {
			return v.getTime()
		}).join(',')
		router.push({
			path: '/list/manage',
			query: {
				...route.query,
				date: date
			},
		})
	}
}

// 单项函数删除函数 参数uid
const handleDeleteByUid = (uid: string) => {
	// 二次确认
	ElMessageBox.confirm('确认要删除该项数据吗?')
		.then(async () => {
			const resp = await axios.delete('/api/list/' + uid);
			const { code, message } = resp.data;
			if (code === 200) {
				ElMessage({
					type: 'success',
					message
				})
				fetchList()
			}
		})
		.catch(() => {
			console.log('取消删除')
		})
}

//  /api/lists/12341231231231
//  /api/lists/123123123123123,1231231231231,1231231231231,12312312312

const handleDeleteMutlByUid = () => {
	// 二次确认
	ElMessageBox.confirm('确认要删除选中的项数据吗?')
		.then(async () => {
			const resp = await axios.delete('/api/list/' + uids.value.join(','));
			const { code, message } = resp.data;
			if (code === 200) {
				ElMessage({
					type: 'success',
					message
				})
				fetchList()
			}
		})
		.catch(() => {
			console.log('取消删除')
		})
}

// 处理多选操作改变事件
const handleSelectionChange = (selection: ListItem[]) => {
	// 保存选中的uid
	uids.value = selection.map(v => v.uid)
}



/*********************************** 编辑  ***********************************/ 
// 弹框状态
const visible = ref(false)
const payList = ["微信", "支付宝", "现金", "银行卡"]
const sourceList = ["app下单", "小程序", "直播"]
const stateList1 = [
	"未付款",
	"已付款",
	"待发货",
	"已发货",
	"代签收",
	"已签收",
	"已关闭",
]
const form = reactive<ListItem>({
	code: 1,
	createDateTime: '2',
	uid: '3',
	"price": 4,
	"pay": '5',
	"source": '6',
	"state": '7',
})

// 编辑点击
const handleModify = (row: ListItem) => {
	visible.value = true
	Object.assign(form, row)
}

// 确定修改
const handleEdit = async () => {
	visible.value = false
	const resp = await axios.post('/api/list', form)
	const { code, message } = resp.data;
	if(code === 200) {
		ElMessage.success(message)
		fetchList()
	}
}



watch(route, () => {
	fetchList()
})

onMounted(() => {
	fetchList()
})
</script>

<style scoped>
.row {
	margin: 10px 0;
	align-items: center;
}
</style>